<template>
  <div id="box">
    <!-- 登录 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="ifbtn1">欢迎回来</span>
        <span v-if="ifbtn2">用户注册</span>
        <el-link type="primary" v-if="ifbtn1" @click="registered"
          >注册账号</el-link
        >
        <el-link type="primary" v-if="ifbtn2" @click="zhuce">登录账号</el-link>
      </div>
      <!-- 登录 -->
      <div class="ifbtn1" v-if="ifbtn1">
        <el-form
          class="demo-form-inline"
          :model="login"
          :label-position="labelPosition"
          label-width="80px"
        >
          <el-form-item label="用户名">
            <el-input
              v-model="login.username"
              placeholder="请输入用户名"
              ref="input"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="login.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userLogin">登录</el-button>
            <el-button @click="loginarr">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 注册 -->
      <div class="ifbtn2" v-if="ifbtn2">
        <el-form
          class="demo-form-inline"
          :model="logintwo"
          :label-position="labelPosition"
          label-width="80px"
        >
          <el-form-item label="用户名">
            <el-input
              v-model="logintwo.username"
              placeholder="请输入用户名"
              ref="input"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="logintwo.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sign">注册</el-button>
            <el-button @click="loginarr">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 登陆验证 -->
      <el-dialog
        title="为了确认是本人操作 请验证"
        :visible.sync="dialogVisible"
        width="350px"
      >
        <slide-verify
          :l="42"
          :r="10"
          :w="310"
          :h="155"
          slider-text="向右滑动"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
        ></slide-verify>
        <span>{{ msg }}</span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 表格的提示位置
      labelPosition: "right",
      // 登录数据
      login: {
        username: "",
        password: "",
      },
      //注册数据
      logintwo: {
        username: "",
        password: "",
      },
      // 后台账号密码
      zhanghao: [],
      // 登陆验证提示信息
      msg: "",
      dialogVisible: false,
      ifbtn1: true,
      ifbtn2: false,
      // 异步函数
      notifyPromise: Promise.resolve(),
    };
  },
  mounted() {
    this.getTableList();
    this.open();
  },
  methods: {
    //登录
    registered() {
      this.ifbtn1 = false;
      this.ifbtn2 = true;
    },
    //注册
    zhuce() {
      this.ifbtn1 = true;
      this.ifbtn2 = false;
    },
    //登录
    userLogin() {
      axios
        .post("http://127.0.0.1:3000/login", {
          login: this.login,
        })
        .then((res) => {
          console.log(res.data.code);
          if (res.data.code === 200) {
            this.dialogVisible = true;
          } else {
            this.$message.error("用户名或密码错误");
          }
          console.log(this.login);
          this.getTableList();
        })
        .catch((err) => {
          console.log(err);
        });
      this.logintwo = {};
    },
    //登陆验证
    onSuccess(e) {
      let str = (e / 1000).toFixed(1);
      window.localStorage.setItem("usr", this.login.username);
      this.msg = `太棒了 只用了 ${str} 秒！`;
      setTimeout(() => {
        this.$router.push("/");
      }, 400);
      this.$message.success("登陆成功");
    },
    onFail() {
      this.msg = "验证失败";
    },
    onRefresh() {
      this.msg = "";
    },
    //登录重置
    loginarr() {
      this.login = {};
    },
    //获取注册
    getTableList() {
      axios.get("http://127.0.0.1:3000/sign").then((res) => {
        this.logintow = res.data;
        console.log(res.data);
      });
    },
    //注册功能
    sign() {
      this.ifbtn1 = true;
      this.ifbtn2 = false;
      console.log(this.logintwo);
      axios
        .post("http://127.0.0.1:3000/sign", {
          sign: this.logintwo,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.$message.success("注册成功");
            this.getTableList();
            this.open();
          } else {
            this.$message.error("账号已存在注册失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.logintwo = {};
    },
    //账号提示
    open() {
      axios.get("http://127.0.0.1:3000/sign").then((res) => {
        this.zhanghao = res.data
          console.log(res.data)
          for (let i = 0; i < this.zhanghao.length; i++) {
            // 异步函数 同步执行的话 弹出框都会重叠在一起
            this.notifyPromise = this.notifyPromise.then(() => {
              this.$notify({
                title: "账号" + res.data[i].username,
                message: "密码" + res.data[i].password,
                position: "bottom-left",
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 480px;
  margin: 330px auto;
}
#box > .el-card {
  color: #fff;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
}
#box {
  position: fixed;
  background-color: #2d353c;
  width: 100%;
  height: 100%;
}
.el-link {
  float: right;
  margin-top: 5px;
}
</style>